<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://paycn.com.cn/pos" prefix="p"%>
<script type="text/javascript"
	src="<c:url value="/static/js/bootstrap-datepicker.js"/>"></script>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<h3 class="page-title">休假</h3>
			<ul class="breadcrumb">
				<li><i class="icon-home"></i> <a
					href="<c:url value="/home.html"/>">首页</a> <i
					class="icon-angle-right"></i></li>
				<li><a href="#">休假</a></li>
			</ul>
		</div>
	</div>

	<div class="row-fluid">
		<div class="span12">
			<div class="portlet">
				<div class="portlet-title">

					<div class="tools">
						<a class="collapse" href="javascript:;"></a>
					</div>
				</div>
				<div class="portlet-body">
					<c:choose>
						<c:when test="${messageError!=null }">
							<div class="alert alert-error">
								<strong>失败!</strong> ${messageError }
							</div>
						</c:when>
						<c:when test="${messageSuccess!=null }">
							<div class="alert alert-success">
								<strong>成功!</strong> ${messageSuccess }
							</div>
						</c:when>
					</c:choose>
					<form class="form-inline" method="post"
						onsubmit="return checkSearch();">
						<div class="row-fluid">

							<div class="span2 query">
								<div class="control-group">
									<label class="control-label">开始时间</label>
									<div class="controls">
										<input type="text" id="startdate" name="startdate"
											class="m-wrap span12 date-picker" value="" />
									</div>
								</div>
							</div>
							<div class="span2 query">
								<div class="control-group">
									<label class="control-label">结束时间</label>
									<div class="controls">
										<input type="text" id="enddate" name="enddate"
											class="m-wrap span12 date-picker" value="" />
									</div>
								</div>
							</div>
							<div class="span2 query">
								<div class="control-group">
									<label class="control-label">&nbsp;</label>
									<div class="controls">
										<button type="submit" class="btn blue purple-stripe">
											<i class="icon-search"></i> 查询
										</button>
									</div>
								</div>
							</div>
						</div>
					</form>

				</div>
			</div>
		</div>
	</div>

	<div class="row-fluid">
		<div class="span12">
			<div class="portlet box grey">
				<div class="portlet-title">
					<div class="caption">
						<i class="icon-bookmark"></i>休假
					</div>

					<div class="actions">
						<a class="btn green" href="<c:url value="/vacation/add.html"/>"><i
							class="icon-plus"></i> 添加</a> <a class="btn  gray"
							href="<c:url value="/vacation/download.html"/>"> <i
							class="icon-long-arrow-down"></i> 导出Excel
						</a>
					</div>

				</div>
				<div class="portlet-body no-more-tables">
					<table class="table table-bordered table-striped table-hover">
						<thead>
							<tr>
								<th>姓名</th>
								<th>部门</th>
								<th>申请日期</th>
								<th>类型</th>
								<th>原因</th>
								<th>开始时间</th>
								<th>结束时间</th>
								<th>请假天数</th>
								<th>特殊说明</th>
								<th>职务代理人</th>
								<th>状态</th>
								<!--   
								<th>操作</th>-->
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${dataGrid.rows }" var="row">
								<tr>
									<td data-title="部门名称">${row.name}&nbsp;</td>
									<td data-title="部门">${row.dept}&nbsp;</td>
									<td data-title="申请日期">${row.appdate}&nbsp;</td>
									<td data-title="类型">${row.vacationtype}&nbsp;</td>
									<td data-title="原因">${row.cause}&nbsp;</td>
									<td data-title="开始时间">${row.startdate}&nbsp;</td>
									<td data-title="结束时间">${row.enddate}&nbsp;</td>
									<td data-title="请假天数">${row.countdate}&nbsp;</td>
									<td data-title="特殊说明">${row.special}&nbsp;</td>
									<td data-title="职务代理人">${row.agent}&nbsp;</td>
									<td data-title="状态">${row.state}&nbsp;</td>
									<!--   
									<td data-title="操作"><a
										href="<c:url value="/vacation/${row.id }/edit.html"/>"
										class="btn mini blue"> <i class="icon-edit"></i> 修改
									</a>&nbsp;| <a
										href="<c:url value="/vacation/delete.html?id=${row.id}"/>"
										class="btn mini red delete-confirm"> <i class="icon-trash"></i>
											删除
									</a> <a class="btn mini gray"
										href="<c:url value="/vacation/${row.id }/download.html"/>">
											<i class="icon-long-arrow-down"></i> 导出Excel
									</a></td>
									-->
								</tr>
							</c:forEach>
						</tbody>
					</table>
					<p:pagination url="/vacation/list.html" total="${dataGrid.total}" />
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(".date-picker").datepicker({
		format : "yyyy-mm-dd",
		language : 'zh',
		clearBtn : true,
		autoclose : true
	});

	var start, end, flag = 0;

	$('#startdate').datepicker({
		format : 'yyyy.mm.dd',
		weekStart : 1,
		autoclose : true,
		todayBtn : 'linked',
		language : 'zh-CN'
	}).on('changeDate', function(ev) {
		var startTime = ev.date.valueOf();
		start = startTime;
		if (start > end) {
			flag = 1;
			alert("“开始时间 ”必须能早于“结束时间” ！");
			$("#startdate").focus();
		} else {
			flag = 0;
		}
	});

	$('#enddate').datepicker({
		format : 'yyyy.mm.dd',
		weekStart : 1,
		autoclose : true,
		todayBtn : 'linked',
		language : 'zh-CN'
	}).on('changeDate', function(ev) {
		var endTime = ev.date.valueOf();
		end = endTime;
		if (end < start) {
			flag = 2;
			alert("“结束时间 ”不能早于“开始时间 ” ！");
			$("#enddate").focus();
		} else {
			flag = 0;
		}
	});

	function checkSearch() {
		if (flag != 0) {
			if (flag == 1) {
				alert("“开始时间 ”必须能早于“结束时间” ！");
			}
			if (flag == 2) {
				alert("“结束时间 ”不能早于“开始时间 ” ！");
			}
			return false;
		}
		return true;
	}
</script>